<template>
	<view>
		<cu-custom bgColor="bg-gradual-blue" :isBack="true">
			<block slot="content">通知详情</block>
		</cu-custom>
		<view class="container">
			<view class="title-text">
				<text>{{msg.title}}</text>
				<text style="font-size: .8em;color:#7a7a7a;">{{msg.subTitle}}</text>
			</view>
			<view class="info">
				<text class="info-text">{{format(msg.createTime)}}</text>
				<text class="info-text">发布人：{{msg.senderName}}</text>
			</view>
			<view class="dialog-content" v-html="msg.content"></view>
		</view>
	</view>
</template>

<script>
	import {
		format
	} from '@/a/utils/api.js'
	export default {
		onLoad({
			id,
			senderName
		}) {
			this.$http.get('/api/v1/bMessage/selectOne', {
				id
			}).then((
				result
			) => {
				this.msg = {
					senderName,
					...result,
					content: (result.content || '').replace(/<img/g, "<img style='max-width:100%;height:auto;'")
				}
			});
		},
		data() {
			return {
				format,
				msg: {}
			}
		}
	}
</script>

<style lang="scss" scoped>
	page {
		width: 100%;
	}

	img {
		width: 100% !important;
	}

	.container {
		background-color: #fff;
		padding: 10px 10px;

		.title-text {
			font-size: 18px;
			display: flex;
			flex-direction: column;
			line-height: 1.6em;
			flex: 1;
			color: #333;
			letter-spacing: 0.5px;
			word-spcing: 0.5px;

			text {
				white-space: nowrap;
				overflow: hidden;
				text-overflow: ellipsis;
			}
		}

		.info {
			margin-top: 5px;
			margin-bottom: 30px;
			display: flex;
			flex-direction: row;
			justify-content: space-between;

			.info-text {
				color: #999;
				font-size: 14.5px;
			}
		}
	}

	.dialog-content {
		overflow-y: auto;
		overflow-x: hidden;
		width: 100%;

		::v-deep img,
		::v-deep p,
		::v-deep span {
			width: 100%;
		}
	}
</style>
